<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin-bottom: 1000px;
        }
        .box{
            border: 3px dashed #ccc;
            padding: 20px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app" class="box">
        <p>父组件</p>
        <!--
            vue 项目中为子组件标签定义的class和style (不分动静)，对该子组件而言是无法通过props进行数据拦截
            => vue这样设计是为了实现组件的个性化样式定义，在统一组件的复用模式，
               可以通过传递class和style实现组件在不同的使用场景下提供不同的样式描述

            => vue在子组件标签上定义属性，默认都会被存储于 $attrs 属性上，并作为子组件根标签的属性进行定义
                当$attrs记录的属性被prorps拦截，该属性将从$attrs 删除，作为子组件的数据传递属性进行使用
                class和style 只能被用于为子组件根标签提供传递样式的功能，不能被拦截
            
        -->
        <comp-a class="a" :style=" 'color:red;' " msg="测试自定义属性"></comp-a>
        <hr>
        <comp-a class="a" :style=" 'color:blue;' "></comp-a>
    </div>

    <script type="text/x-template" id="compA">
        <div class="box">
            <p>子组件:(class,style和props的关系)</p>
        </div>
    </script>

    <script>
        Vue.component("CompA", {
            template:"#compA",
            // props:["class","style"]
        })
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>